<template>
	<div>
		<div class="swiper-container">
			<div class="swiper-wrapper">
				<!-- <el-carousel :interval="5000">
					<el-carousel-item v-for="item in 1" :key="item" arrow="never">
						<div style="width:100%;height:100%;background-repeat:no-repeat;background-size:cover;background-position:center;text-align:center;" v-if="item === 1" :style="{backgroundImage:'url('+require('../../assets/websit/img/banner.png')+')'}"></div>
						<!-- <div style="width:100%;height:100%;background-repeat:no-repeat;background-size:cover;background-position:center;text-align:center;" v-if="item === 2" :style="{backgroundImage:'url('+require('../../assets/websit/img/banner-1.png')+')'}"></div> -->
						<div style="width:100%;height:100%;background-repeat:no-repeat;background-size:cover;background-position:center;text-align:center;" :style="{backgroundImage:'url('+require('../../assets/websit/img/banner-2.png')+')'}"></div>
					<!-- </el-carousel-item>
				</el-carousel> -->
			</div>
		</div>
<!-- 针对建筑企业 -->
    <div class="dingzhi">

     <div class="ziyuansu">

     <div class="jianzhuaa">
       
       <div class="zhendui">

       <div class="icon-zhen"></div>
       <div class="zhenxushu">

        <p class="title-p">针对建筑企业</p>
        <p class="title-op">为建筑业企业深度定制开发的内部管理系统，高效全面管理企业证书信息。</p>

       </div>

       </div>

     </div>
     <div class="jianzhuab">
       
       <div class="zhendui">

       <div class="icon-zhen"></div>
       <div class="zhenxushu">

        <p class="title-p">功能一目了然</p>
        <p class="title-op">从用户角度出发，摒弃复杂步骤，呈现最实用、最符合人工习惯的操作模式。</p>

       </div>

       </div>

     </div>
     <div class="jianzhuac">
       
       <div class="zhendui">

       <div class="icon-zhen"></div>
       <div class="zhenxushu">

        <p class="title-p">沟通高效便捷</p>
        <p class="title-op">解决跨部门沟通问题，项目押证情况一目了然，降低沟通成本，随时随地查询。</p>

       </div>

       </div>

     </div>

     </div>

    </div>

		<div class="container">
			<!-- 定制标题 -->
			<div class="customized">
				<div class="customized-title">
					<!-- <img src="~@/assets/websit/img/title1.png" alt="" /> -->
					<h1>视频介绍</h1>
          <div class="title-bio"></div>
					<!-- <img src="~@/assets/websit/img/title2.png" alt="" /> -->
				</div>
				<h4> Video Presentation</h4>
			</div>
			<div class="realization">
				<video :src="videoList"
        controls="controls"
        controlsList="nodownload"
        height="675px"
        width="1200px"
        >
					your browser does not support the video tag
				</video>
			</div>
			<!-- 定制标题 -->

			<!-- 功能实现 -->
			<div class="function">
				<div class="customized-title">
					<!-- <img src="~@/assets/websit/img/title1.png" alt="" /> -->
					<h1>产品优势</h1>
          <div class="title-bio"></div>
					<!-- <img src="~@/assets/websit/img/title2.png" alt="" /> -->
				</div>
				<h4>Product advantages</h4>
				<div class="function-content">
					<ul>
						<li>
							<img src="~@/assets/websit/img/work.png" alt="" />
							<h3>提高工作效率</h3>
							<p>专门针对建筑业企业定制，解决证书混乱，统计查询难，协同难等证书难题，让工作更轻松、更高效。</p>
							<div class="line"></div>
							<h4>信息准确  |  去向明确  |  处理及时  |  分类统计</h4>
						</li>
						<li>
							<img src="~@/assets/websit/img/Pattern.png" alt="" />
							<h3>提升管理模式</h3>
							<p>企业组织架构人员信息一目了然，全方位提升企业管理效率。 </p>
							<div class="line"></div>
							<h4>人才储备  |  人员更新  |  组织架构</h4>
						</li>
						<li>
							<img src="~@/assets/websit/img/belong.png" alt="" />
							<h3>打造企业专属</h3>
							<p>可针对企业管理模式定制开发，不局限于现有功能，软件一直持续更新迭代，打造企业专属软件和服务。</p>
							<div class="line"></div>
							<h4>定制开发  |  更新迭代  |  专属服务</h4>
						</li>
					</ul>
				</div>
			</div>
			<!-- 软件核心功能 -->
			<!-- <div class="software">
       <img src="~@/assets/websit/img/ruanjianhexingongneng.png" alt="">
			</div> -->
			<!-- 多元服务 -->
			<div class="service">
				<div class="customized-title">
					<!-- <img src="~@/assets/websit/img/title1.png" alt="" /> -->
					<h1>多元服务</h1>
          <div class="title-bio"></div>
					<!-- <img src="~@/assets/websit/img/title2.png" alt="" /> -->
				</div>
				<h4>Multiple services</h4>
				<div class="service-content">

         <div class="multiple-a">
           


         </div>

				</div>
			</div>
			
      <!-- banner -->
      <div class="banner-opp">

      </div>
			<!-- 合作企业 -->
			<div class="realization">
				<div class="customized-title">
					<!-- <img src="~@/assets/websit/img/title1.png" alt="" /> -->
					<h1>合作企业</h1>
          <div class="title-bio"></div>
					<!-- <img src="~@/assets/websit/img/title2.png" alt="" /> -->
				</div>
				<h4>Cooperative Enterprise</h4>
				<div class="realization-content">
					<ul>
						<li>
							<img src="~@/assets/websit/img/zt.png" alt="中天建设" />
						</li>
						<li>
							<img src="~@/assets/websit/img/nqln.png" alt="" />
						</li>
						<li>
							<img src="~@/assets/websit/img/hxjs.png" alt="" />
						</li>
						<li>
							<img src="~@/assets/websit/img/hyks.png" alt="" />
						</li>
						<li>
							<img src="~@/assets/websit/img/nykj.png" alt="" />
						</li>
					</ul>
					<ul>
						<li>
							<img src="~@/assets/websit/img/stjt.png" alt="" />
						</li>
						<li>
							<img src="~@/assets/websit/img/tzjs.png" alt="" />
						</li>
						<li>
							<img src="~@/assets/websit/img/yfjs.png" alt="" />
						</li>
						<li>
							<img src="~@/assets/websit/img/yfjt.png" alt="" />
						</li>
						<li>
							<img src="~@/assets/websit/img/ycjs.png" alt="" />
						</li>
					</ul>
				</div>
			</div>
		</div>
	</div>
</template>
<script>
    import '@/assets/websit/css/index.css'
    export default {
		data(){
			return{
				showOneImg: true,
				showTwoImg: true,
				showThreeImg: true,
        // videoList:window.SITE_CONFIG.remoteUrl + '/video/movie.mp4',
        // https://www.certms.cn
        videoList:'https://honghekeji.oss-cn-hangzhou.aliyuncs.com/zhengshu.mp4'

			}
		},
    created(){
    // this.videoList = 
    },
        methods:{
			
		}
    }
</script>
<style lang="scss">
	.el-carousel__container{
		height: 600px;
  }
  .banner-opp{
    width: 100%;
    height: 500px;
    background: url(~@/assets/websit/img/zhineng-a.png);
    background-size: 100% 100%;
  }
  .multiple-a{
    margin-top: 50px;
    width: 1200px;
    height: 450px;
    // duoyuan-a
    background: url(~@/assets/websit/img/duoyuan-a.png);
    background-size: 100% 100%;
  }
  .title-bio{
    width: 40px;
    height: 3px;
    background: #3FA9F5;
    opacity: 1;
    position: absolute;
    bottom: 2px;
    left: 50%;
    transform: translateX(-50%);
  }
  .dingzhi{
    width: 100%;
    height: 150px;
    background-color: #FAFAFA;
    display: flex;
    justify-content: center;
    align-items: center;
    border-bottom: 1px solid #E7E7E7;
  }
  .ziyuansu{
    width: 1200px;
    height: 150px;
  }
  .jianzhuaa{
    width: 397px;
    float: left;
    height: 150px;
    display: flex;
    justify-content: center;
    align-items: center;
    border-left: 1px solid #E7E7E7;

    .zhendui{
      width: 345px;
      height: 75px;
      .icon-zhen{
        width: 75px;
        height: 75px;
        float: left;
        background: url(~@/assets/websit/img/architecture1.png);
        background-size: 100% 100%;
      }
      .zhenxushu{
        width: 240px;
        height: 75px;
        float: right;
        .title-p{
          font-size: 18px;
          font-weight: 700;
          color: #333333;
        }
        .title-op{
          margin-top: 14px;
          font-size: 14px;
          font-weight: 400;
          line-height: 21px;
          color: #666666;
        }
      }
    }
  }
  .jianzhuab{
    width: 397px;
    float: left;
    height: 150px;
    display: flex;
    justify-content: center;
    align-items: center;
    border-left: 1px solid #E7E7E7;
    border-right: 1px solid #E7E7E7;

    .zhendui{
      width: 345px;
      height: 75px;
      .icon-zhen{
        width: 75px;
        height: 75px;
        float: left;
        background: url(~@/assets/websit/img/function.png);
        background-size: 100% 100%;
      }
      .zhenxushu{
        width: 240px;
        height: 75px;
        float: right;
        .title-p{
          font-size: 18px;
          font-weight: 700;
          color: #333333;
        }
        .title-op{
          margin-top: 14px;
          font-size: 14px;
          font-weight: 400;
          line-height: 21px;
          color: #666666;
        }
      }
    }

  }
  .jianzhuac{
    width: 397px;
    float: left;
    height: 150px;
    display: flex;
    justify-content: center;
    align-items: center;
    border-right: 1px solid #E7E7E7;

    .zhendui{
      width: 345px;
      height: 75px;
      .icon-zhen{
        width: 75px;
        height: 75px;
        float: left;
        background: url(~@/assets/websit/img/efficiency.png);
        background-size: 100% 100%;
      }
      .zhenxushu{
        width: 240px;
        height: 75px;
        float: right;
        .title-p{
          font-size: 18px;
          font-weight: 700;
          color: #333333;
        }
        .title-op{
          margin-top: 14px;
          font-size: 14px;
          font-weight: 400;
          color: #666666;
          line-height: 21px;
        }
      }
    }
  }
  .software{
    margin-top: 25px;
    // height: 500px;
    img{
      width: 100%;
    }
    // background: url();
  }
  .architecture{
    padding-bottom: 30px !important;
  }
</style>